<template>
	<div id="inform">
		<el-container>
			<div class="top">
				<el-input placeholder="请输入标题关键字" clearable v-model="lookname"></el-input>
				<el-input placeholder="请输入内容关键字" clearable v-model="lookcontent"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="lookup">查找</el-button>
				<download-excel :data="tableData" :fields="daocu" name="inform-manage.xls">
					<el-button type="primary" icon="el-icon-download">导出</el-button>
				</download-excel>
			</div>
			<div class="tjsc">
				<el-button type="primary" icon="el-icon-edit" @click="dialogTableVisible = true">添加</el-button>
				<el-button type="danger" icon="el-icon-delete" @click="plschu">批量删除</el-button>
			</div>
			<el-main>
				<el-table ref="multipleTable" :data="tableData" row-key="id" @selection-change="handleSelectionChange"
					style="width: 100%" border>
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="title" label="通知标题">
					</el-table-column>
					<el-table-column prop="particulars" label="通知详情">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="chakan(scope.$index, scope.row)">查看
							</el-button>
						</template>
					</el-table-column>
					<el-table-column label="添加时间" prop="addTime">
					</el-table-column>
					<el-table-column prop="adminId" label="管理员ID">
					</el-table-column>
					<el-table-column label="操作" align="center">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="getData(scope.row),dialogEiditVisible = true">
								编辑
							</el-button>
							<el-button size="mini" type="danger" @click="deleteRow(scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-main>
			<!-- 通知详情 -->
			<el-dialog title="通知详情" :visible.sync="dialogVisible" center width="50%">
				<span v-html="lrong"></span>
			</el-dialog>
			<!-- 添加 -->
			<el-dialog title="创建" :visible.sync="dialogTableVisible" width="70%">
				<el-form :model="tantu">
					<el-form-item label="通知标题" :label-width="formLabelWidth">
						<el-input autocomplete="off" v-model="tantu.title"></el-input>
					</el-form-item>
					<el-form-item label="通知内容" :label-width="formLabelWidth">
						<Editor :init="editorInit" v-model="tantu.content" style="width: 700px;"></Editor>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogTableVisible = false">取 消</el-button>
					<el-button type="primary" @click="daobu">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 编辑 -->
			<el-dialog title="编辑" :visible.sync="dialogEiditVisible" width="55%">
				<el-form :model="bji">
					<el-form-item label="通知标题" :label-width="formLabelWidth">
						<el-input autocomplete="off" v-model="bji.title"></el-input>
					</el-form-item>
					<el-form-item label="通知内容" :label-width="formLabelWidth">
						<Editor :init="editorInit" v-model="bji.content"></Editor>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogEiditVisible = false">取 消</el-button>
					<el-button type="primary" @click="edit">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 分页 -->
			<el-footer>
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:page-sizes="[10, 20, 30, 40,50,100]" :page-size="10"
					layout="total, sizes, prev, pager, next, jumper" :total="page">
				</el-pagination>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	import {
		adminlist, //列表数据
		ajshd, //添加
		bbdwav, //编辑
		//删除
		jawdhli,
		tzpaginga,
		batches, //批量删除
		chazao, // 查找
		tzpaging //分页
	} from '@/api/http.js'
	import Editor from '@tinymce/tinymce-vue'
	export default {
		components: {
			Editor
		},
		data() {
			return {
				tableData: [], //通知列表渲染
				// 查找
				lookname: '',
				lookcontent: '',
				// 导出
				daocu: {
					"通知标题": "title",
					"通知详情": "content",
					"添加时间": "addTime",
					"管理员ID": "id",
				},
				dialogVisible: false, //控制详情弹窗
				scid: [], //批量删除
				lrong: '',
				formLabelWidth: '120px',
				//添加
				dialogTableVisible: false,
				tantu: {
					title: '',
					content: '',
				},
				//编辑
				dialogEiditVisible: false,
				bji: {
					id: '',
					title: '',
					content: ''
				},
				page: 0, //分页
				editorInit: {
					language: 'zh_CN',
					height: 200,
					convert_urls: false,
					plugins: [
						'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
					],
					toolbar: [
						'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
						'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
					],
					images_upload_handler: function(blobInfo, success, failure) {
						const formData = new FormData();
						formData.append('file', blobInfo.blob());
						createStorage(formData)
							.then(res => {
								success(res.data.data.url);
							})
							.catch(() => {
								failure('上传失败，请重新上传');
							});
					}
				},
			}
		},
		mounted() {
			this.getAdmin()
		},
		methods: {
			//获取通知列表数据 列表渲染
			getAdmin() {
				adminlist().then((res) => {
					this.tableData = res.data.data.list
					this.page = res.data.data.total
					// console.log(res.data.data.list)
				})
			},
			// 查找
			lookup() {
				chazao(this.lookname, this.lookcontent).then(res => {
					this.tableData = res.data.data.list
				})
			},
			// 添加通知
			daobu() {
				this.dialogTableVisible = false
				let tjia = {
					title: this.tantu.title,
					content: this.tantu.content
				}
				ajshd(tjia).then(res => {
					console.log(res)
					if (res.data.errmsg == "成功") {
						this.$notify({
							title: '成功',
							message: '添加通知成功',
							type: 'success'
						});
						this.getAdmin();
						this.tantu.title = ''
						this.tantu.content = ''
					} else {
						this.$notify({
							title: '失败',
							message: '添加失败！',
							type: 'error'
						});
					}
				}).catch(err => {
					console.log("失败")
				})
			},
			// 编辑角色
			getData(row) {
				this.bji.title = row.title
				this.bji.content = row.content
				this.bji.id = row.id
			},
			edit() {
				let bwdo = {
					id: this.bji.id,
					title: this.bji.title,
					content: this.bji.content
				}
				bbdwav(bwdo).then(res => {
					this.$notify({
						title: '成功',
						message: '更新通知成功',
						type: 'success'
					});
					this.getAdmin();
				}).catch(err => {
					console.log("失败")
				})
				this.dialogEiditVisible = false
			},
			// 查看
			chakan(index, row) {
				this.dialogVisible = true
				this.lrong = row.content
			},
			//删除
			deleteRow(index) {
				let sanchu = {
					id: index.id,
					title: index.title,
					content: index.content
				}
				jawdhli(sanchu).then(res => {
					console.log(res)
					if (res.data.errmsg == "成功") {
						this.$notify({
							title: '成功',
							message: '删除管理员成功',
							type: 'success'
						});
						this.getAdmin();
					} else {
						this.$notify.error({
							title: '失败',
							message: '删除失败',
							type: 'success'
						});
					}
				}).catch(err => {
					this.$notify.error({
						title: '失败',
						message: '删除失败',
						type: 'success'
					});
				})
			},
			//批量删除
			plschu() {
				let dadw = {
					ids: this.scid
				}
				if (this.scid == '') {
					this.$message.error({
						message: '请选择至少一条记录',
					});
				} else {
					batches(dadw).then((res) => {
						this.$notify({
							title: '成功',
							message: '删除成功',
							type: 'success'
						});
						this.getAdmin(); //调用渲染数据更新页面
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}
			},
			//获取批量删除id
			handleSelectionChange(i) {
				this.scid = []
				i.forEach(item => {
					this.scid.push(item.id)
				})
			},

			// 分页
			handleCurrentChange(page) {
				tzpaging(page).then((res) => {
					this.tableData = res.data.data.list
				})
			},
			handleSizeChange(num) {
				tzpaginga(num).then((res) => {
					this.tableData = res.data.data.list
				})
			},
		}
	}
</script>

<style>
	#inform .top {
		line-height: 40px;
		height: 40px !important;
		margin-bottom: 20px;
	}

	#inform .top .el-input {
		width: 200px;
		margin-right: 10px;
	}

	#inform .top .el-button {
		margin-right: 10px;
	}

	#inform .top div {
		display: inline-block;
	}

	#inform .tjsc {
		text-align: right;
		margin-bottom: 10px;
	}

	#inform .el-form-item .el-input {
		width: 300px;
	}

	#inform .el-main {
		padding-bottom: 5px;
	}

	#inform .el-table__body tr .cell {
		text-align: center;
	}

	#inform .has-gutter tr th {
		text-align: center;
	}

	#inform .el-footer {
		border-bottom: 0px;
	}

	#inform .el-form-item {
		color: #373737;
	}

	#inform .avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	#inform .avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	#inform .avatar-uploader-icon {
		font-size: 25px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	#inform .avatar {
		width: 100px;
		height: 100px;
		display: block;
	}
</style>
